<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
    <h2>学员信息表</h2>
    <p>1803</p>
</nav>
<main>
    <div class="container">
        <h2>添加</h2>
        <div class="row">
            <div class="col-md-3">
                <input type="text" id="n" placeholder="姓名">
            </div>
            <div class="col-md-3">
                <select id="s">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="col-md-3">
                <input type="number" id="a" placeholder="年龄">
            </div>
            <div class="col-md-3">
                <button id="btn">添加</button>
            </div>
        </div>
    </div>
</main>

<footer>
    <div class="container">
        <h2>列表</h2>
        <table class="table">

            <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>
</footer>



<script>
    document.querySelector("#btn").addEventListener("click",function(){
        var n = document.querySelector("#n").value;
        console.log(n);

        var s = document.querySelector("#s").value;
        console.log(s);

        var a = document.querySelector("#a").value;
        console.log(a);


        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                console.log(xmlhttp.responseText);
            }
        };
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
        xmlhttp.send();
    });



    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json =JSON.parse(xmlhttp.responseText);
                console.log(json.data);
                for(let i = 0;i<json.data.length;i++){
                    var tdname = document.createElement("td");
                    tdname.innerHTML =json.data[i].studentName;
                    var tdsex = document.createElement("td");
                    tdsex.innerHTML = json.data[i].sex;
                    var tdage = document.createElement("td");
                    tdage.innerHTML=json.data[i].age;

                    var tr = document.createElement("tr");
                    tr.appendChild(tdname);
                    tr.appendChild(tdsex);
                    tr.appendChild(tdage);
                    document.querySelector("tbody").appendChild(tr);
                }
            }
        };
        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
        xmlhttp.send();
    }
    loadXMLDoc();
</script>
</body>
</html>